<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, viewport-fit=cover, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <title>完善资料</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dsbridge/dist/dsbridge.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/axios.ubi.js"></script>
    <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
    <script>
        var OSS = OSS.Wrapper;
    </script>
    <style type="text/CSS">
        .roundedRectangle {
            margin: 10px 10px 0 10px;
            background: #FFFFFF; /*背景色*/
            border-width: 10px; /*边缘的宽度，如果要分别设置可以这样：border-width: 15px 5px 15px 5px;依次为上、右、下、左*/
            border-style: solid;
            border-radius: 15px; /*圆角的大小*/
            border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF; /*边框颜色，依次为上、右、下、左*/
        }

        .roundedRectangle p {
            margin: 0 auto;
            padding: 20px;
            text-align: center;
            font-size: 20px;
            letter-spacing: 8px;
        }

        .vertical-layout {
            width: 30%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .vertical-layout1 {
            width: auto;
            display: flex;
            flex-direction: column;
        }

        .horizontal-between-layout {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .horizontal-layout {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .radius-layout {
            border-radius: 50%;
            border: 1px solid white;
            height: 22px;
            width: 22px;
            display: inline-block;
            color: #FFFFFF;
            line-height: 22px;
            text-align: center
        }

        .center {
            display: flex;
            justify-content: space-between;
            /*align-items: center;*/
            width: 100%;
            /*height: 20%;*/
            padding-top: 30px;
            /*background-image: url('../img/ubi/bg.png');*/
            background-color: #32C699;
        }

        .line-layout {
            height: 1px;
            width: calc(70% - 84px - 22px);
            border: none;
            border-top: 1px solid white;
            margin-top: 11px;
            margin-left: calc(15% + 42px + 11px);
        }

        .btn {
            /*position: absolute;*/
            text-align: center;
            bottom: 0;
            font-size: 18px;
            color: #FFFFFF;
            margin: 25px 35px 25px 35px;
            width: calc(100% - 70px);
            height: 50px;
            line-height: 45px;
            border-radius: 50px;
            background-color: #32C699;
            /*left: 50%;*/
            /*transform: translateX(-50%);*/
        }

        .text-key {
            font-size: 14px;
            /*color: #999999;*/
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            font-family: PingFangSC-Regular, PingFang SC;
            background-color: #F1F3F6;
            background-size: 100% 100%;
            background-position: center;
        }

    </style>
</head>
<body>
<div id="app">
    <div>
        <div class="center">
            <div class="vertical-layout" style="margin-left: 42px">
            <span class="radius-layout">
                <span style="display: block;color: #FFFFFF;height: 22px;line-height: 22px;text-align: center">1</span>
            </span>
                <p style="font-size: 16px;color: #FFFFFF;">车主信息</p>
            </div>

            <div class="vertical-layout" style="margin-right: 42px">
            <span class="radius-layout">
                <span style="display: block;color: #FFFFFF;height: 22px;line-height: 22px;text-align: center">2</span>
            </span>
                <p style="font-size: 16px;color: #FFFFFF;">行驶证信息</p>
            </div>
        </div>

        <div style="float: left;width: 100%;margin-top: -80px">
            <hr class="line-layout"/>
        </div>
    </div>
    <van-form @submit="onSubmitDrivingLicense">
        <div class="roundedRectangle">
            <div style="font-size: 18px;width: 100%;"><b>行驶证信息</b></div>
            <van-divider :style="{ color: '#DFDFDF', borderColor: '#DFDFDF' }"></van-divider>

            <div class="horizontal-between-layout">
                <div class="vertical-layout1">
                    <div class="horizontal-layout">
                        <span style="color:#999999;font-size: 12px">行驶证正本照片</span>
                        <span style="color:red">*</span>
                    </div>
                    <van-image width="150" height="100" fit="contain"
                               :src="imagePath" @click="openCamera"></van-image>
                </div>
                <div class="vertical-layout1">
                    <span style="color:#999999;font-size: 12px">样例</span>
                    <van-image width="150" height="100" fit="contain"
                               src="./images/sample.png"></van-image>
                </div>
            </div>

            <van-divider :style="{ color: '#DFDFDF', borderColor: '#DFDFDF' }"></van-divider>

            <van-field
                    v-model="vehicleModel"
                    label=" 品牌型号"
                    class="text-key"
                    required
                    maxlength="30"
                    name="品牌型号"
                    placeholder="请输入品牌型号"
                    input-align="right"
                    :rules="[{ required: true }]"></van-field>
            <van-field
                    v-model="vin"
                    name="车辆识别代号"
                    label=" 车辆识别代号"
                    maxlength="30"
                    class="text-key"
                    required
                    placeholder="请输入车辆识别代号"
                    input-align="right"
                    :rules="[{ required: true }]"></van-field>
            <van-field
                    v-model="engineNo"
                    name="发动机号"
                    label="发动机号"
                    maxlength="30"
                    class="text-key"
                    input-align="right"
                    required
                    placeholder="请输入发动机号"
                    :rules="[{ required: true }]"></van-field>
            <van-cell
                    title="注册日期"
                    :value="registerTime "
                    @click="show = true"
                    is-link="true"
                    class="text-key"></van-cell>
            <van-calendar v-model="show" @confirm="onConfirm" color="#32C699" :min-date="minDate" :max-date="maxDate"
                          :default-date="defaultDate"></van-calendar>
        </div>
        <van-button round block color="#32C699" native-type="submit" class="btn">提交</van-button>
    </van-form>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                active: 1,
                vehicleModel: '',
                vin: '',
                engineNo: '',
                registerTime: this.getCurrentDate(),
                minDate: new Date(1980, 0, 1),
                maxDate: new Date(2050, 0, 1),
                defaultDate: new Date(2020, 0, 1),
                show: false,
                client: '',
                imagePath: './images/camera.png',
                vehicleCode: '',
                driverName: '',
                driverIdCard: '',
                driverPhone: '',
                activityId: '',
                cityId: '',

                // tempImage: '',
            };
        },
        mounted() {
            this.getUserParams();
            this.getOSSParams();
        },
        methods: {
            openCamera() {
                // 异步调用相机
                this.callCamera();
            },
            callCamera() {
                const self = this;
                dsBridge.call("openCameraAndAlbum", "", function (v) {
                    alert('dasdasd');
                    let imgFile = this.base64ImgtoFile(v);
                    self.handleFileUpload(imgFile).then(res => {
                        console.log("上传成功:", res);
                        return self.getDriveCardInfo(res);
                    });
                })
            },

            base64ImgtoFile(dataurl, filename = 'file') {
                let arr = dataurl.split(',');
                let mime = arr[0].match(/:(.*?);/)[1];
                let suffix = mime.split('/')[1];
                let bstr = atob(arr[1]);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], `${filename}.${suffix}`, {
                    type: mime
                })
            },

            getUserParams() {
                this.vehicleCode = this.convertParam("vehicleNum");
                this.driverName = this.convertParam("name");
                this.driverIdCard = this.convertParam("idCard");
                this.driverPhone = this.convertParam("phoneNo");
                this.cityId = this.convertParam("cityId");
                this.activityId = this.convertParam("activityId");
                // alert(this.cityId + this.activityId + this.driverIdCard + this.driverPhone)
            },

            convertParam(key) {
                let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                let result = decodeURI(window.location.search).substr(1).match(reg);
                return unescape(result[2]);
            },
            getOSSParams() {
                const self = this;
                axios.get(`/hkr-mod-tl/api/v1/ali_sts/oss`)
                    .then(function (response) {
                        if (response.data.code === 0 && response.data.payload) {
                            console.log("response:", response.data.payload)
                            self.client = new OSS({
                                region: 'oss-cn-beijing',
                                bucket: response.data.payload.bucketName,
                                endPoint: response.data.payload.endpoint,
                                accessKeyId: response.data.payload.ossCredentials.accessKeyId,
                                accessKeySecret: response.data.payload.ossCredentials.accessKeySecret,
                                stsToken: response.data.payload.ossCredentials.securityToken
                            });
                        } else {
                            vant.Toast('获取OSS参数失败');
                        }
                    }.bind(this))
                    .catch(function (err) {
                        console.log(err);
                        vant.Toast('网络异常，请稍后再试');
                    });
            },
            handleFileUpload(f) {
                alert('ppppp');
                console.log("handleBeforeUpload:");
                const self = this;
                let file = f;
                let fileName = 'ubi/' + new Date().getTime();
                return new Promise((resolve, reject) => {
                    self.client.multipartUpload(fileName, file).then((res) => {
                        console.log("oss==result:", res);
                        if (res.res.status === 200) {
                            vant.Toast('图片上传成功:' + res.url);
                            resolve(res.url);
                        } else {
                            reject('图片上传成功失败');
                        }
                    }).catch((err) => {
                        console.log("oss==err:", err);
                        reject('网络异常，请稍后再试');
                    });
                });
            },
            getDriveCardInfo(res) {
                console.log("getDriveCardInfo:", res);
                const self = this;
                let obj = {
                    "pictureFileName": res,
                    "ocrType": 4
                };
                axios.post(`/hkr-cm/api/v1/activity/phone=${this.phoneNo}/ocr`, obj)
                    .then(function (response) {
                        console.log("driveinfo:" + response.data);
                        if (response.data.code === 0) {
                            vant.Toast("行驶证信息识别成功");
                            self.imagePath = res;
                            self.vehicleModel = response.data.payload.brandModel;
                            self.vin = response.data.payload.vehicleCode;
                            self.engineNo = response.data.payload.engineNo;
                            self.vehicleModel = response.data.payload.brandModel;
                        } else {
                            vant.Toast("行驶证信息识别失败，请重试");
                        }
                    })
                    .catch(function (err) {
                        vant.Toast("网络异常，请稍后再试");
                    });
            },
            getCurrentDate() {
                let date = new Date(2020, 0, 1);
                // let date = new Date();
                return this.formatDate(date);
            },
            formatDate(date) {
                return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
            },
            onConfirm(date) {
                this.show = false;
                this.date = this.formatDate(date);
            },
            onSubmitDrivingLicense(values) {
                console.log('submit', values);
                let obj = {
                    "activityId": this.activityId,
                    // "activityName": this.activityName,
                    "brandModel": this.brandModel,
                    "cityId": this.cityId,
                    "driverIdCard": this.driverIdCard,
                    "driverLicenseUrl": this.driverLicenseUrl,
                    "driverName": this.driverName,
                    "driverPhone": this.driverPhone,
                    "engineNo": this.engineNo,
                    "registerTime": this.registerTime,
                    "vehicleCode": this.vin,
                    "vno": this.vehicleCode,
                };
                axios.post(`/hkr-cm/api/v1/activity/phone=${this.phoneNo}/driver`, obj)
                    .then(function (response) {
                        if (response.data.code === 0) {
                            vant.Toast("信息上传成功");
                        } else {
                            vant.Toast("信息上传失败，请重新上传");
                        }
                    })
                    .catch(function (err) {
                        vant.Toast("网络异常，请稍后再试");
                    });
            },
        }
    });
</script>
</html>
